<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="description" content="A wrapper of JQuery Dynatree plugin." />
<meta name="keywords" content="Tree Dynatree JQuery Plugin Javascript 树形 插件 " />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="google-site-verification" content="yaeorbXgKPwp5BDegBtAJEHYWFEFE-BViWTj74gJPrw" />
<!--  -->
<link href="/css/default.css" type="text/css" rel="stylesheet" />
<!--  -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/lang/en.js"></script>
<script type="text/javascript" src="/js/mac/core.min.js"></script>
<link href="/css/default/ui.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/css/default/dynatree/ui.css" />
<script type="text/javascript" src="/js/jquery/ui.js"></script>
<script type="text/javascript" src='/js/jquery/dynatree.min.js'></script>
<script type="text/javascript" src="/js/mac/contextMenu.min.js"></script>
<link type="text/css" rel="stylesheet" href="/css/default/mac/menu/menu.min.css" />
<script type="text/javascript" src="/js/mac/menu.min.js"></script>
<script type="text/javascript" src="/js/mac/dtree.min.js"></script>
<!-- <script type="text/javascript" src="/js/mac/dtree.min.js"></script> -->
<script type="text/javascript" src="/js/mac/webapp.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#nav_jump').change(function(){
		location = './' + this.value + '.html';
	}).val('basic');
	$('.demoSource').val($('#demo').html());
});
</script>
</head>
<div id="head">
	<a href="/en/"><img src="/css/images/logo_s.png" alt="logo" /></a>
	<div class="title">BOARSOFT.COM</div>
	<div class="right">
		<div>
			<a href="/public/lang.php?l=en">English</a>
			|
			<a href="/public/lang.php?l=cn">简体中文</a>
			|
			<a href="http://activemq.apache.org/" target="_blank">ActiveMQ</a>
			|
			<a href="https://redis.io/" target="_blank">Redis</a>
			|
			<a href="http://www.jquery.com/" target="_blank">JQuery</a>
		</div>
	</div>
</div><body>
<div id="nav">
	<div id="nav_path">
		<a href="/en/">Home</a>
		&gt;
		<a href="/en/mac/js/dtree">JQuery MagicDTree</a>
	</div>
	<div id="nav_back">
		<a href="/en/mac/js/dtree/doc" target="_blank">Document</a>
		|
		<a href="javascript:history.back()">Back</a>
		|
		<a href="/mac/js/dl/basic.html">Download</a>
		&nbsp;&nbsp;
	</div>
	<div class="clear"></div>
</div>
<div class="demoInfo">
	<h2 class="demoTitle">MagicDTree Demo</h2>
	<p>JQuery Dynatree plugin is updated to 1.2.5</p>
</div>
<div id="demo" class="demoPanel" style="overflow: auto"><script type="text/javascript">
$(function(){
	var ctxMenu = $('#ctxMenu1');
	var tree = $('#tree1');
	tree.mac('dtree', {
		treeConfig: {
			children: [{
				key: 'root',
				title: 'All Regions',
				isLazy: true,
				isFolder: true//,
				//icon: 'root.png'
			}]//,
			//imagePath: App.ctx + '/css/img/'
		},
		ctxMenu: ctxMenu,
		menuOffset: { x: 0, y: 0 },
		doInsert: function(dt, callback){
			var d = dt.data;
			d.level = d.level?d.level:0;
			var p = { level: 1, path: '/', parent: 'root' };
			if(d.level>0){
				p.parent = d.key;
				p.level = d.level + 1;
				if(d.level==1){
					p.path = '/'+ d.key + '/';
				}else{
					p.path = d.path + d.key + '/';
				}
				p.value = d.value;
			}
			App.open({
				action: 'editRegion',
				title: 'Add Region',
				modal: true,
				params: p
			}, function(dd){
				callback(dd);
				//dt.deactivate();
				//dt.activate();
			});
		},
		doUpdate: function(dt, callback){
			var d = dt.data;
			App.open({
				action: 'editRegion',
				title: 'Edit Region',
				modal: true,
				params: d
			}, function(dd){
				callback(dd);
			});
		},
		doDelete: function(dt, callback){
			App.confirm('Are you sure you want to delete?', function(){
				App.alert('Delete is not allowed in this demo.')
//				var p = { id: dt.data.key, level: dt.data.level };
//				$.post('delete.php', p, function(data){
//					var ro = App.eval(data);
//					if(ro.success){
//						App.alert(Msg.info.success, [ Msg.del ]);
//						callback();
//						var tx = tree.getNode(dt.data.parent);
//						tx.activate();
//					}else{
//						App.alert(ro.data, ro.params);
//					}
//				});
			});
		},
		loader: {
			url: '/mac/js/dtree/list.php',
			params: { key: 'root' },
			autoLoad: true
		},
		onCtxMenu: function(el){
			// var d = el.prop('dtnode').data;
			var d = $.ui.dynatree.getNode(el).data;
			ctxMenu.enableItems();
			if(!d.level){
				ctxMenu.disableItems('update,delete');
			}
		}
	});
});
</script>
<div id="tree1" style="height: 100%"></div>
<ul id="ctxMenu1" class="ctxMenu hidden">
	<li action="insert" class="add item clear">
		<span style="display: block">
			<span class="icon icon-plus"></span>
			<span>Add Region</span>
		</span>
	</li>
	<li action="update" class="edit item clear">
		<span style="display: block">
			<span class="icon icon-pencil"></span>
			<span>Edit Region</span>
		</span>
	</li>
	<li action="delete" class="delete item clear">
		<span style="display: block">
			<span class="icon icon-minus"></span>
			<span>Delete Region&nbsp;</span>
		</span>
	</li>
</ul></div>
<textarea class="demoSource" wrap="off"></textarea>
<iframe src="/mac/js/related.php" class="related"></iframe>
<div id="foot">
Copyright © 2011. All rights reserved&nbsp;&nbsp;蜀ICP备11014774号-1&nbsp;&nbsp;
QQ: 7213571&nbsp;&nbsp;E-mail: pyh_jerry@163.com&nbsp;&nbsp;
<!-- 
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffc0b0282216be3d16055855d8c0e72d9' type='text/javascript'%3E%3C/script%3E"));
</script>
&nbsp;&nbsp;
 -->
</div></body>
</html>
